<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="1000px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="checkItemModel"
      ref="checkItemForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-tabs type="border-card" v-model="activeTabName" style="height:450px">
            <el-tab-pane name="appointmentTab" label="档案信息" class="user-info-tab-pane">
              <el-row>
                <el-col :span="24">
                  <strong style="font-size:19px;">信息</strong>
                </el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="4">档案号：</el-col>
                <el-col :span="8" v-text="checkItemModel.tMember.filenumber"></el-col>
                <el-col :span="4">姓名：</el-col>
                <el-col :span="8" v-text="checkItemModel.tMember.name"></el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="4">性别：</el-col>
                <el-col :span="8" v-text="checkItemModel.tMember.sex==0?'男':'女'"></el-col>
                <el-col :span="4">年龄：</el-col>
                <el-col :span="8" v-text="checkItemModel.tMember.age"></el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="24">
                  <strong style="font-size:19px">病例</strong>
                </el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="4">疾病史：</el-col>
                <el-col :span="20" v-text="checkItemModel.tMemberMedicalhistory.medicalHistory"></el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="4">遗传史：</el-col>
                <el-col :span="20" v-text="checkItemModel.tMemberMedicalhistory.familyHistory"></el-col>
              </el-row>
              <el-row class="CheckItem-info-tab-pane">
                <el-col :span="4">手术史：</el-col>
                <el-col :span="20" v-text="checkItemModel.tMemberMedicalhistory.previousHistory"></el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="体检信息">
              <el-row
                class="CheckItem-info-tab-pane"
                v-for="(value,key,index) in checkItemModel.tMemberDynamicinfo"
                :key="index"
              >
                <el-col :span="8">{{key}}:</el-col>
                <el-col :span="16">{{value}}</el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="评估报告"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="12">
          <el-tabs type="border-card" v-model="activeTabName2" style="height:450px">
            <el-tab-pane name="appointmentTab2" label="基本信息" class="user-info-tab-pane">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="档案号">
                    <el-input v-model="checkItemModel.tMember.filenumber" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="checkItemModel.tMember.name" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="姓别">
                    <el-radio-group v-model="checkItemModel.tMember.sex" :disabled="true">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年龄">
                    <el-input v-model="checkItemModel.tMember.age" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="方案标题">
                    <el-input v-model="checkItemModel.interposeScheme.schemeTittle" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="干预时间" label-width="100px">
                    <el-date-picker
                      v-model="foodsDays"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                      unlink-panels
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      @blur="getDietaryDays"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="方案目标">
                    <el-input
                      type="textarea"
                      :rows="3"
                      v-model="checkItemModel.interposeScheme.schemeTarget"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="饮食干预">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="干预时间" label-width="100px">
                    <el-date-picker
                      v-model="tInterposeFood.date"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      unlink-panels
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="餐次">
                    <el-input v-model="tInterposeFood.eatTimes" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="推荐食物">
                    <el-input v-model="tInterposeFood.recommendFood"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="每日份量">
                    <el-input v-model="tInterposeFood.foodQuantity" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="每次摄入">
                    <el-input v-model="tInterposeFood.adi" type="number"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button @click="addFood()" type="prmiary">保存</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="checkItemModel.interposeFoodList" height="200px">
                    <el-table-column label="干预时间" width="190px">
                      <template scope="scope">{{scope.row.start+"至"+scope.row.end}}</template>
                    </el-table-column>
                    <el-table-column label="餐次" prop="eatTimes"></el-table-column>
                    <el-table-column label="推荐食物" width="100px" prop="recommendFood"></el-table-column>
                    <el-table-column label="分量" prop="foodQuantity"></el-table-column>
                    <el-table-column label="摄入量" prop="adi"></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="运动干预">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="干预时间" label-width="100px">
                    <el-date-picker
                      v-model="tInterposeSprot.date"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      unlink-panels
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="运动名称">
                    <el-input v-model="tInterposeSprot.sportName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="运动时长">
                    <el-input v-model="tInterposeSprot.sportTime" type="number"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="运动周期">
                    <el-input v-model="tInterposeSprot.sportCycle" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="消耗量">
                    <el-input v-model="tInterposeSprot.consumeCount" type="number"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button @click="addSprot()" type="prmiary">保存</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="checkItemModel.interposeSprotList" height="200px">
                    <el-table-column label="干预时间" width="190px">
                      <template scope="scope">{{scope.row.start+"至"+scope.row.end}}</template>
                    </el-table-column>
                    <el-table-column label="运动名" prop="sportName"></el-table-column>
                    <el-table-column label="运动时长" prop="sportTime"></el-table-column>
                    <el-table-column label="运动周期" prop="sportCycle"></el-table-column>
                    <el-table-column label="消耗量" prop="consumeCount"></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('checkItemForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveMeals } from "@/api/dingming/interventionPlan";

export default {
  name: "checkItem-edit",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      foodsDays: [],
      loading: false,
      checkItemModel: {
        tMember: {
          id: "",
          filenumber: "",
          name: "",
          sex: "",
          age: "",
          idcard: "",
          phonenumber: "",
          regtime: "",
          password: "",
          email: "",
          birthday: "",
          remark: "",
          createtime: "",
          updatetime: ""
        },
        tMemberMedicalhistory: {
          id: "",
          tMemberId: "",
          previousHistory: "",
          familyHistory: "",
          allergicHistory: "",
          medicalHistory: "",
          chronicDisease: "",
          createtime: "",
          updatetime: ""
        },
        tMemberDynamicinfo: {
          id: "",
          tMemberId: "",
          height: "",
          weight: "",
          dbp: "",
          sbp: "",
          breth: "",
          thermometer: "",
          waistline: "",
          hipline: "",
          createtime: "",
          updatetime: ""
        },
        interposeScheme: {
          id: "",
          tMemberId: "",
          schemeTittle: "",
          modelId: "",
          startTime: "",
          endTime: "",
          schemeTarget: "",
          healthMgrId: "",
          status: "",
          createtime: "",
          updatetime: ""
        },
        interposeFoodList: null,
        interposeSprotList: null
      },
      dialogProps: {
        visible: false, //控制对话框弹出收起
        action: "", //存入add || edit
        title: "" //存入对话框标题
      },
      activeTabName: "appointmentTab",
      activeTabName2: "appointmentTab2",
      tInterposeFood: {
        date: [],
        eatTimes: "",
        recommendFood: "",
        foodQuantity: "",
        adi: ""
      },
      tInterposeSprot: {
        date: [],
        sportName: "",
        sportTime: "",
        sportCycle: "",
        consumeCount: ""
      }
    };
  },
  methods: {
    addFood() {
      this.checkItemModel.interposeFoodList.push({
        id: 0,
        tMemberId: this.checkItemModel.tMember.id,
        eatTimes: this.tInterposeFood.eatTimes,
        recommendFood: this.tInterposeFood.recommendFood,
        foodQuantity: this.tInterposeFood.foodQuantity,
        adi: this.tInterposeFood.adi,
        status: 0,
        start: this.tInterposeFood.date[0],
        end: this.tInterposeFood.date[1],
        createtime: null,
        updatetime: null
      });
    },
    addSprot() {
      this.checkItemModel.interposeSprotList.push({
        id: 0,
        tMemberId: this.checkItemModel.tMember.id,
        sportName: this.tInterposeSprot.sportName,
        sportTime: this.tInterposeSprot.sportTime,
        sportCycle: this.tInterposeSprot.sportCycle,
        consumeCount: this.tInterposeSprot.consumeCount,
        status: 0,
        start: this.tInterposeSprot.date[0],
        end: this.tInterposeSprot.date[1],
        createtime: null,
        updatetime: null
      });
    },

    /**
     * 失焦获取饮食干预时间段
     */
    getDietaryDays() {
      this.checkItemModel.interposeScheme.startTime = this.foodsDays[0];
      this.checkItemModel.interposeScheme.endTime = this.foodsDays[1];
    },

    /**
     * 点击确认提交计划
     */
    submitForm() {
      console.log(this.checkItemModel)
      /* this.loading = true;
      saveMeals(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        }); */
    },

    /**
     * 点击取消按钮
     */
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    /**
     * 弹框时触发的函数
     * 用来清除表单验证
     */
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["checkItemForm"].clearValidate();
      });
    },
    /**
     * 错误提示
     */
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  /**
   * 传入父组件的方法
   * 用来判断用户点击的按钮是删除还是添加
   */
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditCheckItemDialog", function(checkItem) {
        console.log(checkItem)
        this.checkItemModel = checkItem;
        (this.checkItemModel.interposeFoodList = []),
          (this.checkItemModel.interposeSprotList = []),
          (this.dialogProps.action = "edit");
        this.dialogProps.title = "体检报告";
        this.dialogProps.visible = true;
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.parent-router-select {
  width: 100%;
}
.CheckItem-info-tab-pane {
  margin-top: 10px;
}
</style>